<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业信息完善</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <link rel="stylesheet" href="../../css/enterpriseupload.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-form" style="width: 60%;margin-left: 20px">
        <div class="layui-form-item">
            <div class="layui-row">
                <label class="layui-form-label">公司环境</label>
                <div class="layui-input-inline" style=";width:840px;margin-top: 0px">
                    <button class="layui-btn" id="test1">添加图片</button>
                    <button class="layui-btn" id="save"><i class="layui-icon ">&#xe67c;</i>上传</button>
                    <button class="layui-btn" id="searchimg" style="float: right">查看已上传图片</button>
                    <div style="width: 800px;height: 200px;border: #ff6000 1px solid;margin-top: 10px;padding:20px 20px 20px 20px;">
                        <label style="font-size: 18px">预览图:</label>
                        <div class="layui-upload-list"></div>
                        <label style="color: #828282">(提示:双击删除预览图,每次最多上传五张图片, 单张图片的大小不超过5MB)</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="width: 900px">
            <div class="layui-row" style="margin-top: 20px">
                <label class="layui-form-label" style="width: 150px;height: 10px">企业特色活动</label>
                <div class="layui-input-inline" style="width: 140px">
                    <div style="width:130px;height: 130px;border: #ff6000 1px solid;text-align: center">
                        <img id="qrshow" style="width:99.8%;height: 99.8%"></img>
                    </div>
                    <button id="uploadQR" class="layui-btn" style="width: 130px;height: 40px;margin-top: 10px;"><i
                            class="layui-icon ">&#xe67c;</i>选择
                    </button>
                </div>
                <div class="layui-input-inline" style="width: 692px;margin-top:0px">
                    <textarea placeholder="请输入活动内容,最多200字" id="activitis" class="layui-textarea" name="activityContent"
                              style="width:692px;height: 135px;resize: none;font-size: 18px" maxlength="200"></textarea>
                    <button id="startUploadQR" class="layui-btn" style="width: 80px;height: 40px;margin-top: 7px">提交
                    </button>
                    <button class="layui-btn" id="searchact" style="float: right;margin-top: 7px">查看已上传活动</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="../../libs/layui/layui.js"></script>
<script src="../../js/model.js"></script>
<script type="text/javascript">
    layui.use(['form', 'element', 'layer', 'jquery', 'upload', 'laydate', 'table'], function () {
        let $ = layui.$
        let element = layui.element;
        let layer = layui.layer;
        let form = layui.form;
        let upload = layui.upload;

        // 获取contentText
        const ctx = function () {
            let pathName = document.location.pathname;
            let index = pathName.substr(1).indexOf("/");
            let result = pathName.substr(0, index + 1);
            return result;
        }();

        // 获取enterprise
        var enterprise = JSON.parse(window.sessionStorage.getItem("enterprise"));

        //绑定layer通知
        $("#searchimg").click(function () {
            layer.open({
                type: 2,
                title: '已上传图片',
                shadeClose: true,
                shade: 0.4,
                area: ['800px', '500px'],
                content: 'enterpriseUploadImg.html'
            });
        });
        $("#searchact").click(function () {
            layer.open({
                type: 2,
                title: '已上传图片',
                shadeClose: true,
                shade: 0.4,
                area: ['800px', '500px'],
                content: 'enterpriseUploadAct.html'
            });
        });

        //执行实例
        var totalArray = new Array();
        var arry = new Array();
        var cnt = 0;
        var cnt2 = 0;
        var loadindex;
        var uploadInst = upload.render({
            elem: '#test1', //绑定元素
            multiple: true,
            auto: false,
            size: 5120,
            number: 5,
            acceptMime: 'image/*',
            bindAction: "#save",//绑定上传
            url: ctx + '/upload/singleImageUpload', //上传接口
            data: {diridentity: enterprise.enterpriseid},
            choose: function (obj) { //obj参数包含的信息，跟 choose回调完全一致
                totalArray = totalArray.concat(obj.pushFile());
                cnt2 = Object.keys(totalArray[0]).length;
                console.log(cnt2);
                if (cnt2 <= 5) {
                    obj.preview(function (index, file, result) {
                        files = obj.pushFile();
                        $(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:150px;height:150px;margin-left:10px;line-height: 100px;object-fit: contain">')
                        $('#remove_' + index).bind('dblclick', function () {//双击删除指定预上传图片
                            delete files[index];//删除指定图片
                            $(this).remove();
                            cnt2 = cnt2 - 1;
                        })
                    })
                } else {
                    layer.msg("上传不能超过5张,请重新选择", {icon: 7}, function () {
                        location.reload();
                    })

                }
            },
            before: function () {
                if (cnt2 == 0) {
                    return layer.msg("您还未上传图片", {icon: 7});
                }
                loadindex = layer.load();//开启上传加载遮罩
            }, done: function (res) {
                var ipath = res.data;
                arry.push(ipath.src);
                if (arry.length == cnt2) {
                    addPhotoCollection(arry);
                }
                //上传完毕回调
            },
            error: function () {
                //请求异常回调
            }
        });

        // 添加图片集地址到数据库
        function addPhotoCollection(arry) {
            $.ajax({
                url: ctx + "/ygssecs/addPhotoCollection",
                type: 'POST',
                dataType: 'JSON',
                data: {photoCollection: JSON.stringify(arry), enterjson: JSON.stringify(enterprise)}
            }).done(function (res) {
                layer.close(loadindex);//关闭加载遮罩层
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1, time: 2000}, function () {
                        location.reload();
                    })
                } else {
                    layer.msg(res.msg, {icon: 6, time: 2000}, function () {
                        location.reload();
                    })
                }
            }).fail(function (error) {
                console.log(error)
            });
        }


        //单文件示例  选完文件后不自动上传
        var uploadSingle = upload.render({
            elem: '#uploadQR'
            , url: ctx + '/upload/singleImageUpload'
            , accept: 'images'  // 允许上传的文件类型
            , size: 5120        // 最大允许上传的文件大小  单位 KB
            , auto: false
            , bindAction: '#startUploadQR',
            data: {diridentity: enterprise.enterpriseid}
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#qrshow').attr('src', result); //图片链接（base64）
                });
            }
            , before: function (obj) {
                var str = $("#activitis").val();
                if (str == "") {
                    layer.msg("请输入活动内容", {icon: 7});
                    stopPropagation();
                }
            }
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    //上传成功
                    var pathobj = res.data;
                    addActivity(pathobj.src);
                } else {
                    this.error(index, upload);
                }
            }, error: function (index, upload) {
                //演示失败状态，并实现重传
                var startDiv = $('#startDiv');
                startDiv.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px">重试</a>');
                startDiv.find('.demo-reload').on('click', function () {
                    uploadSingle.upload();
                });
            }
        });

        //添加特色活动
        function addActivity(imagepath) {
            //加载层遮罩
            var loadindex;
            var activitycontent = $("[name='activityContent']").val();
            var activity = new CharacteristicActivities(null, activitycontent, imagepath, enterprise);
            $.ajax({
                url: ctx + "/ygssecs/addFeaturedActivities",
                type: 'GET',
                dataType: 'JSON',
                beforeSend: function () {
                    loadindex = layer.load(1, {shade: 0.3});
                },
                data: {activityjson: JSON.stringify(activity)}
                // headers: {"token": sessionStorage.getItem("token")},
            }).done(function (datas) {
                layer.close(loadindex);//关闭加载遮罩
                if (datas.code == 200) {
                    layer.msg(datas.msg, {icon: 1, time: 2000}, function () {
                        location.reload();
                    });
                } else {
                    layer.msg(datas.msg, {icon: 6});
                }
            }).fail(function () {
                console.log("error");
            });
        }
    });
</script>

</html>